/**
 * 图层要素高亮
 */

/**
 * key: 图层id
 * value: 图层 hover 要素 id
 */
const hoverFeatureIdByLayerIdMap: any = {}

/**
 * hover 要素高亮
 * @param mapbox
 * @param $event
 * @param layerId
 * @param mouseEvent
 */
export function hoverSetFeatureState(
  mapbox: any,
  $event: any,
  layerId: string,
  mouseEvent: string
) {
  if (mouseEvent === 'mousemove') {
    if ($event.features.length > 0) {
      const hoverFeatureIdByLayerId: any = hoverFeatureIdByLayerIdMap[layerId]
      if (hoverFeatureIdByLayerId) {
        mapbox.setFeatureState(
          { source: `source-${layerId}`, id: hoverFeatureIdByLayerId },
          { hover: false }
        )
      }

      hoverFeatureIdByLayerIdMap[layerId] = $event.features[0].id
      mapbox.setFeatureState(
        {
          source: `source-${layerId}`,
          id: hoverFeatureIdByLayerIdMap[layerId],
        },
        { hover: true }
      )
    }
  } else {
    const hoverFeatureIdByLayerId: any = hoverFeatureIdByLayerIdMap[layerId]
    if (hoverFeatureIdByLayerId) {
      mapbox.setFeatureState(
        { source: `source-${layerId}`, id: hoverFeatureIdByLayerId },
        { hover: false }
      )
    }
    hoverFeatureIdByLayerIdMap[layerId] = null
  }
}

/**
 * key: 图层id
 * value: 图层 select 要素 id
 */
const selectFeatureIdByLayerIdMap: any = {}

/**
 * 选择要素高亮
 * @param mapbox mapbox 实例
 * @param layerId 图层id
 * @param featureIdArray 高亮的要素
 */
export function selectedSetFeatureState(
  mapbox: any,
  layerId: string,
  featureIdArray: number[] | string[]
) {
  const selectFeatureIdByLayerId: any = selectFeatureIdByLayerIdMap[layerId]
  if (selectFeatureIdByLayerId && selectFeatureIdByLayerId.length > 0) {
    selectFeatureIdByLayerId.forEach((featureId: number | string) => {
      mapbox.setFeatureState(
        { source: `source-${layerId}`, id: featureId },
        { select: false }
      )
    })
  }
  selectFeatureIdByLayerIdMap[layerId] = featureIdArray
  featureIdArray.forEach((featureId: number | string) => {
    mapbox.setFeatureState(
      { source: `source-${layerId}`, id: featureId },
      { select: true }
    )
  })
}

export function clearSelectedFeatureState(mapbox: any) {
  const layerIds = Object.keys(selectFeatureIdByLayerIdMap)
  if (layerIds.length === 0) {
    return
  }
  layerIds.forEach((layerId: string) => {
    const selectFeatureIdByLayerId: any = selectFeatureIdByLayerIdMap[layerId]
    if (selectFeatureIdByLayerId && selectFeatureIdByLayerId.length > 0) {
      selectFeatureIdByLayerId.forEach((featureId: number | string) => {
        mapbox.setFeatureState(
          { source: `source-${layerId}`, id: Number(featureId) },
          { select: false }
        )
      })
    }
    selectFeatureIdByLayerIdMap[layerId] = []
  })
}

/**
 * hover 要素高亮
 * @param mapbox
 * @param featureInfo
 * @param mouseEvent
 */
export function globalHoverSetFeatureState(
  mapbox: any,
  featureInfo: any,
  mouseEvent: string
) {
  if (mouseEvent === 'mousemove') {
    if (featureInfo.length === 0) {
      return
    }
    const { layer, id } = featureInfo
    const layerId = layer.id
    const hoverFeatureIdByLayerId: any = hoverFeatureIdByLayerIdMap[layerId]
    if (hoverFeatureIdByLayerId) {
      mapbox.setFeatureState(
        { source: `source-${layerId}`, id: hoverFeatureIdByLayerId },
        { hover: false }
      )
    }

    hoverFeatureIdByLayerIdMap[layerId] = id
    mapbox.setFeatureState(
      {
        source: `source-${layerId}`,
        id: hoverFeatureIdByLayerIdMap[layerId],
      },
      { hover: true }
    )
  } else {
    if (featureInfo.length === 0) {
      return
    }
    const { layer } = featureInfo
    const layerId = layer.id
    const hoverFeatureIdByLayerId: any = hoverFeatureIdByLayerIdMap[layerId]
    if (hoverFeatureIdByLayerId) {
      mapbox.setFeatureState(
        { source: `source-${layerId}`, id: hoverFeatureIdByLayerId },
        { hover: false }
      )
    }
    hoverFeatureIdByLayerIdMap[layerId] = null
  }
}
